<template>
	<char-base :options="chartOptions" class="chartline"></char-base>
</template>

<script>
	import charBase from '../chart/chart-base'
	import {
		getColorList,
		getxAxis,
		getSeriesStyle
	} from '../chart/chart-config'
	export default {
		name: 'wioc-chart-pie',
		components: {
			charBase
		},
		props: ['componentParams', "piedata"],
		data() {
			return {
				chartOrigin: [{
						value: 17,
						name: '一体化（中心）',
					},
					{
						value: 23,
						name: '家门口（社区）'
					},
					{
						value: 27,
						name: '指尖上'
					}
				],
				chartOptions: {}
			}
		},
		watch: {
			"dynamicDataResult": {
				handler() {
					this.setChartOptions(this.dynamicDataResult.data)
				},
				deep: true
			},
			"componentParams": {
				handler() {
					this.getDynamicData()
				},
				deep: true
			}
		},
		mounted() {
			if (this.piedata) {
				this.setChartOptions(this.piedata.data)
			} else {
				this.setChartOptions(this.chartOrigin)
			}
		},
		methods: {
			setChartOptions(renderData) {
				let colorList = getColorList()
				let maxText = 0
				let columnName = []
				renderData.forEach((item) => {
					maxText += item.value
					columnName.push(item.name)
				})
				let option = {
					title: {
						text: maxText,
						x: '36%',
						y: 'center',
						center: ['40%', '50%'],
						textStyle: {
							fontSize: 30,
							fontWeight: 'normal',
							color: ['#78ade3']
						}
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								color: '#64a5e5',
							}
						},
						textStyle: {
							fontSize: 24,
						},
					},
					legend: {
						show: true,
						type: 'scroll',
						orient: 'vertical',
						right: 20,
						top: "center",
						data: columnName,
						textStyle: {
							color: colorList,
							fontSize: 24,
						}
					},
					grid: {
						left: '1%',
						right: '30%',
						bottom: '1%',
						containLabel: true
					},
					series: [
						// 主要展示层的
						{

							type: 'pie',
							clockwise: false, //饼图的扇区是否是顺时针排布
							minAngle: 20, //最小的扇区角度（0 ~ 360）
							center: ['40%', '50%'], //饼图的中心（圆心）坐标
							radius: [70, 130], //饼图的半径
							avoidLabelOverlap: true, ////是否启用防止标签重叠
							itemStyle: { //图形样式
								normal: {
									color: function(params) {
										return colorList[params.dataIndex]
									},
									borderColor: '#fff',
									borderWidth: 1.5,
									fontSize: 28
								},
							},
							label: { //标签的位置
								normal: {
									show: true,
									position: 'inside', //标签的位置
									formatter: "{d}%",
									textStyle: {
										color: '#fff',
										fontSize: 28
									}
								},
								emphasis: {
									show: true,
									textStyle: {
										fontWeight: 'bold'
									}
								}
							},
							data: renderData,
						}, {
							name: '',
							type: 'pie',
							clockwise: false,
							silent: true,
							minAngle: 20, //最小的扇区角度（0 ~ 360）
							center: ['40%', '50%'], //饼图的中心（圆心）坐标
							radius: [0, 60], //饼图的半径
							itemStyle: { //图形样式
								normal: {
									color: function(params) {
										return colorList[params.dataIndex]
									},
									borderColor: '#1e2239',
									borderWidth: 1.5,
									opacity: 0.21,
								}
							},
							label: { //标签的位置
								normal: {
									show: false,
								}
							},
							data: renderData
						}

					]
				};
				this.chartOptions = option
			}
		}
	}
</script>
<style lang="less" scoped="scoped">
	.chartline {
		width: 100%;
		height: 400px;
	}
</style>
